<template>
  <div>
    <Modal v-model:visible="visible" :footer="null" :maskClosable="true" title="选择升级内容">
      <Card>
        <Button
            style="margin-left: 50px; position: relative"
            type="primary"
            @click="openUiDrawer"
        >
          前端升级任务
          <template #icon>
            <RightOutlined style="float: right; margin-left: 210px"/>
          </template>
        </Button>
      </Card>
      <Card>
        <Button
            style="margin-left: 50px; position: relative"
            type="primary"
            @click="openServerDrawer"
        >
          后端升级任务
          <template #icon>
            <RightOutlined style="float: right; margin-left: 210px"/>
          </template>
        </Button>
      </Card>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import {Button, Card, Modal} from 'ant-design-vue';
import {RightOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue';

const visible = ref<boolean>(false);
const emits = defineEmits(['showServerDrawer', 'showUiDrawer'])

function openUiDrawer() {
  visible.value = false;
  emits('showUiDrawer')
}

function openServerDrawer() {
  visible.value = false;
  emits('showServerDrawer')
}

function showModal() {
  visible.value = true
}

defineExpose({showModal})
</script>